<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/MaoYan.css" rel="stylesheet" type="text/css" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .app_vue {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .hread-box {
            height: 150px;
            z-index: 2;
        }

        .box {
            position: relative;
            top:120px;
            flex: 1 1 auto;
        }

        .box img {
            width: 64px;
            height: 90px;
        }

        .app_tlti {
            height: 33px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .app_city {
            color: #666;
            display: flex;
            align-items: center;
            padding-left: 14px;
            font-size: 14px;
        }

        .app_xia {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("img/下.png") no-repeat 2px 8px;
            background-size: 9px;
        }

        .app_dao {
            display: flex;
            height: 33px;
            line-height: 33px;
            position: relative;
            justify-content: space-around;
        }

        .hot-item {
            font-size: 14px;
            color: #666;
            text-align: center;
            margin: 0 2.333333vw;
            font-weight: 700;
        }

        .link {
            width: 15px;
            height: 15px;
            background: url("https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/component/index/img/base64/search-red.png") no-repeat;
            background-size: 15px;
            padding: 7.5px 12px 7.5px 7.5px;
            background-position: 7.5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="app_vue">
            <div class="hread-box">
                <div class="hread">
                    <span>猫眼电影</span>
                    <div class="nav">
                        <img src="https://p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png" />
                    </div>
                </div>
                <div class="app_bar">
                    <div class="app_logo">
                        <img src="https://p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png@80q" />
                    </div>
                    <a class="benefit-text" href="#">发现最新最热电影</a>
                    <a class="app-text" href="#">打开App></a>
                </div>
                <div class="app_tlti">
                    <div class="app_city">
                        <span class="app_name">深圳</span>
                        <i class="app_xia"></i>
                    </div>
                    <div class="app_dao">
                        <a class="hot-item" href="#">热映</a>
                        <a class="hot-item" href="#">影院</a>
                        <a class="hot-item" href="#">待映</a>
                        <a class="hot-item" href="#">经典电影</a>
                    </div>
                    <a href="#" class="link"></a>
                </div>
            </div>
            <div class="box">
                <ul>
                    <li v-for="item in movieArr">
                        <img v-bind:src='item.img'>
                        <div class="text">
                            <span :style='{color:block}' class="move_name">{{item.nm}}</span>
                            <p v-if="item.globalReleased === true && item.mk != 0.0">观众评<span
                                    :style="{color:yugo,fontWeight:fontW}" class="pinf">{{item.mk}}</span></p>
                            <p v-if="item.globalReleased === true && item.mk === 0.0">{{item.scoreLabel}}</p>
                            <p v-if="item.globalReleased === false"><span
                                    :style="{color:yugo,fontWeight:fontW}">{{item.wish}}</span>想看</p>
                            <p class="zhuy">{{item.desc}}</p>
                            <p class="zhuy" v-if="item.globalReleased === true">{{item.showInfo}}</p>
                            <p class="zhuy" v-if="item.globalReleased === false">{{item.pubDesc}}</p>
                        </div>
                        <div class="go" :style={background:item.showStateButton.color}>{{item.showStateButton.content}}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="floor">
                <a href="#">
                    <span>
                        <img src="./img/move1.png" />
                        <p :style="{color:fc}">电影/影院</p>
                    </span>
                </a>
                <a href="#">
                    <span>
                        <img src="https://p0.meituan.net/scarlett/551cc48b3a71478a57b40ac4a00179d61401.png" />
                        <p>视频</p>
                    </span>
                </a>
                <a href="#">
                    <span>
                        <img src="https://p0.meituan.net/scarlett/58a786cefee2770a152ed50c992a864b1254.png" />
                        <p>小视频</p>
                    </span>
                </a>
                <a href="#">
                    <span>
                        <img src="./img/演出 (1).png" />
                        <p>演出</p>
                    </span>
                </a>
                <a href="#">
                    <span>
                        <img src="./img/wode.png" />
                        <p>我的</p>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                block: '#333',
                yugo: '#faaf00',
                FSize: '20px',
                fontW: '900',
                fc: '#f03d37',
                movieArr: []
            },
            created() {
                axios.get("./json/movie.json").then(vel => {
                    console.log(vel.data.data.hot);
                    this.movieArr = vel.data.data.hot;
                });
            }
        });
    </script>
</body>

</html>